<template>
    <div class="naveldetail">
        <div class="container">
            <Header></Header>
            <Header2></Header2>
            <div class="row">
                <div class="col-md-10">
                    <div class="cl_fmxq">

                        <div class="cl_box">
                            <div class="c_img">
                                <img :src="navel_detail.book_img" class="ccc">
                            </div>
                            <div class="c_text" style="width:620px;">
                                <div style="height: 40px;">
                                    <h1 class=" title pull-left">{{navel_detail.name}} <span class="color-hei small">&nbsp;作者: {{navel_detail.author_name}} </span>
                                    </h1>
                                    <span class="color-hei pull-right">&nbsp;总点击数：{{navel_detail.total_up_num}}</span>
                                </div>
                                <button class="btn btn-type-red ">{{navel_detail.category_name}}</button>
                                <div class="content text-left">
                                    {{navel_detail.desc}}
                                </div>

                                <div class="c_btn">
                                    <router-link :to='"/content/" + book_id +"/1"'
                                                 id="ca_ksyd"><h2>免费试读</h2></router-link>
                                    <!--收藏按钮-->
                                    <div class="text-left">
                                        <el-button :type="current_status" icon="el-icon-star-off" circle
                                                   @click="shouchang"></el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="cc">
                        <ul class="mb_content" style="width: 890px;" v-for="(article, index) in navel_content">
                            <li class="c2">
                                <router-link :to="'/content/' + book_id + '/' + article.current_section + '/'"
                                             target="blank"
                                             class="full-left">
                                    {{article.is_free ? article.current_section_name : article.current_section_name + ' [VIP]'}}&nbsp;&nbsp;&nbsp;{{article.title}}
                                    <span style="color: red;"></span>
                                </router-link>
                            </li>
                        </ul>
                    </div>


                </div>
                <div class="col-md-2">
                    <div class="cr_talk">
                        <h3 class="rmtj_bt bt_red"><span>作者信息</span></h3>
                        <div class="cr_talk_box">
                            <div class="crt_title">
                                <div class="cr_img">
                                    <img src="@/assets/image/author_avatr.jpg" class="img_60" alt="默认头像">
                                </div>
                                <div class="cr_text">作者：{{navel_detail.author_name}}</div>
                            </div>

                        </div>
                    </div>
                    <div class="cr_talk">
                        <div style="height: 1000px"></div>
                    </div>
                </div>
            </div>

            <!--页脚-->
            <Footer></Footer>
        </div>

    </div>
</template>

<script>
    import Header from "./Header";
    import Header2 from "./Header2";
    import Footer from "./Footer";


    export default {
        name: "NavelDetail",

        data() {
            return {
                book_id: 0,
                navel_detail: [],
                navel_content: [],

                user_id: '',
                current_status: 'info',
                collectionbook: []
            }
        },
        created() {
            this.get_navel_detail_id();
            this.get_navel_detail();
            this.get_book_collectionbook();
        },
        methods: {
            get_navel_detail_id() {
                // 书的id
                this.book_id = this.$route.params.id;
                // console.log('this.$route.params:', this.$route.params);
            },
            get_navel_detail() {
                this.$axios({
                    url: `${this.$settings.base_url}/book/${this.book_id}/`,
                    method: 'get'
                }).then(response => {
                    console.log('get_navel_detail this.response.data:', response.data);
                    this.navel_content = response.data.article_list;
                    this.navel_detail = response.data;
                })
            },
            // 获取收藏的状态
            get_book_collectionbook() {
                let user_dict = this.$cookies.get('user_dict');
                if (!user_dict) {
                    this.$message({
                        message: "请先登录!",
                        type: 'warning',
                    });
                    return
                }
                this.user_id = user_dict.id;
                this.book_id = this.$route.params.id;

                this.$axios.get(`${this.$settings.base_url}/book/collectionshowone/`, {
                    params: {
                        user_id: this.user_id,
                        book_id: this.book_id
                    }
                }).then(response => {
                    // console.log(response.data.code);
                    if (response.data.code) {

                        this.current_status = 'warning'
                    }
                })
            },


            //点击收藏
            shouchang() {
                let user_dict = this.$cookies.get('user_dict');
                if (!user_dict) {
                    this.$message({
                        message: "请先登录!",
                        type: 'warning',
                    });
                    return
                }
                this.user_id = user_dict.id;
                this.book_id = this.$route.params.id;
                if (!this.user_id) {
                    this.$message.error('您还没有登录,请先登录')
                } else {

                    this.$axios.post(`${this.$settings.base_url}/book/collectionbook/`, {
                        user: this.user_id,
                        book: this.book_id
                    }).then(response => {
                        if (response.data.code) {
                            this.current_status = 'warning';
                            this.$message({
                                message: '收藏成功!',
                                type: 'success',
                            })
                        } else {
                            this.current_status = 'warning';

                            this.$message({
                                message: '小姐姐,您已经收藏过了,不要再点了,我会很痛的!!',
                                type: 'success',
                            });
                        }
                    }).catch(error => {

                    })
                }
            },
            // 书的id
        },
        components: {
            Header,
            Header2,
            Footer,
        }
    }


</script>


<style scoped>
    .el-button.is-circle {
        border-radius: 50%;
        padding: 8px;
        margin-left: 15px;
        margin-bottom: 20px;
    }

    .col-md-10 {
        width: 77%
    }

    .cr_img {
        width: 75px;
        height: 60px;
        float: left;
    }

    .img_60 {
        width: 60px;
        height: 60px;
        border-radius: 100%;
    }

    .cr_text {
        width: 119px;
        float: left;
        height: 60px;
        line-height: 60px;
        overflow: hidden;
    }

    img {
        border: 0;
    }

    .cr_talk_box {
        padding: 15px;
        width: 230px;
        display: block;
        overflow: hidden;
    }

    .crt_title {
        height: 60px;
        width: 230px;
        padding-bottom: 15px;
        overflow: hidden;
    }

    .rmtj_bt {
        height: 44px;
        line-height: 43px;
        /*background: url(../images/line_1.png) bottom left repeat-x;*/
        text-indent: 15px;
        font-size: 16px;
        font-weight: normal;
    }

    .bt_red {
        border-top: 2px solid #ce000c;
    }

    .cr_talk {
        width: 217px;
        border: 1px solid #e4e4e4;
        border-top: none;
        display: block;
        overflow: hidden;
    }

    .cccc {
        margin-right: 20px;
        width: 240px;
        height: 140px;
        border: #999999 dashed 1px;
    }

    .col-md-2 {
        margin-top: 20px;
    }

    .content {

        text-indent: 2em;
        padding: 15px;
        height: 121px;
        margin-bottom: 20px;
        overflow: hidden;
        line-height: 22px;
        font-size: 12px;


    }

    .ccc {
        width: 200px;
        height: 260px;
    }


    .color-hei {

        font-size: 12px;
        font-weight: normal
    }

    .cl_fmxq {

        height: 320px;
        margin-top: 20px


    }

    .c2 {
        border-bottom: #999999 dashed 1px;
    }

    .cc {
        margin-top: 20px;
        width: 919px;
        height: auto;
        border: #999999 solid 1px;

    }

    .mb_content li {
        float: left;
        width: 286px;
        margin: 0 5px;
        display: inline-block;
        height: 40px;
        /*background: url(../images/line.png) bottom left repeat-x;*/
        line-height: 40px;
        overflow: hidden;
    }


    .list-group-item {
        width: 270px;
        height: 40px;
    }

    .btn-type-red {
        margin-left: 20px;
    }

    .c_btn h2 {
        font-size: 14px;
        font-weight: normal;
        line-height: 30px;

    }

    .c_btn a#ca_frsj {
        width: 80px;
        height: 30px;
        border: 1px solid #e70012;
        color: #e70012;

    }

    .c_btn {
        margin-left: 20px;

    }

    .c_btn a {
        float: left;
        margin-right: 8px;
        display: inline-block;
        border-radius: 3px;
        line-height: 30px;
        text-align: center;
    }

    .c_btn a#ca_frsj {
        width: 80px;
        height: 30px;
        border: 1px solid #e70012;
        color: #e70012;
    }

    .title {
        margin-left: 10px;
        margin-bottom: 7px

    }

    .c_btn a {
        float: left;
        margin-right: 8px;
        display: inline-block;
        border-radius: 3px;
        line-height: 30px;
        text-align: center;
    }

    .c_btn a#ca_ksyd {
        width: 100px;
        height: 30px;
        background: #e70012;
        font-family: "宋体";
        /* background: #43a047; */
        color: #FFF;
    }


    .c_btn h2[data-v-2694567b] {
        font-size: 14px;
        font-weight: normal;
        line-height: 30px;
    }

    .btn-type-bgred:link, .btn-type-bgred:hover, .btn-type-bgred a {
        color: #fff;
    }

    element.style {
        text-indent: 2em;
        padding: 15px;
        height: 88px;
        overflow: hidden;
        line-height: 22px;
        font-size: 12px;
    }


    .btn-type-bgred {
        color: #fff;
        background: #ff0000;
        margin: 10px 40px 6px 0;
        border: none;
        max-width: 48px;
        text-align: center;
        padding: 0 12px;
    }

    .cl_fmxq {
        width: 916px;
        height: 345px;
        border: 1px solid #e4e4e4;
        position: relative;
    }

    .c_btn a#ca_ksyd {
        background: #e70012;
    }

    .c_btn a {
        float: left;
        margin-right: 8px;
        display: inline-block;
        border-radius: 3px;
        line-height: 30px;
        text-align: center;
    }


    .c_btn {
        height: 38px;
    }

    .color-hui, .a-link-hui, .a-link-hui a, .a-link-hui a:link, .a-link-hui:link {
        color: #9fa0a0;
    }

    Style Attribute {
        height: 65px;
        overflow: hidden;
        font-size: 12px;
        line-height: 20px;
    }

    .btn-type-bgred:link, .btn-type-bgred:hover, .btn-type-bgred a {
        color: #fff;
    }

    a, a:link {
        text-decoration: none;
        color: #333;
    }

    .btn-type-bgred {
        color: #fff;
        background: #ff0000;
        margin: 10px 40px 6px 0;
        border: none;
        max-width: 48px;
        text-align: center;
        padding: 0 12px;
    }

    .btn-type-blue, .btn-type-red, .btn-type-green, .btn-type-skyblue, .btn-type-bgred {
        display: block;
        color: #2b9de4;
        border: 1px #2b9de4 solid;
        padding: 0 9px;
        border-radius: 3px;
        width: auto;
        font-size: 12px;
    }

    .float-l {
        float: left;
    }

    a {
        text-decoration: none;
    }


    element.style {
        height: 65px;
        overflow: hidden;
        font-size: 12px;
        line-height: 20px;
    }

    body, p, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, ol, form, input, pre, a, img {
        margin: 0;
        padding: 0;
        list-style: none;
        border: 0;
    }

    h1 {
        font-weight: bold;
        font-size: 20px;
        line-height: 150%;
    }

    body, p, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, ol, form, input, pre, a, img {
        margin: 0;
        padding: 0;
        list-style: none;
        border: 0;
    }

    h1 {
        font-weight: bold;
        font-size: 20px;
        line-height: 150%;
    }

    user agent stylesheet
    h1 {
        display: block;
        font-size: 2em;
        margin-block-start: 0.67em;
        margin-block-end: 0.67em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
    }

    .c_text {
        width: 450px;
        height: 276px;
        float: left;
        overflow: hidden;
    }

    element.style {
        width: 200px;
        height: 260px;
    }

    img {
        border: 0;
    }

    body, p, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, ol, form, input, pre, a, img {
        margin: 0;
        padding: 0;
        list-style: none;
        border: 0;
    }

    .c_img {
        width: 198px;
        height: 276px;
        padding-right: 25px;
        float: left;
    }


    .cl_box {
        width: 873px;
        height: 276px;
        overflow: hidden;
        padding: 35px 0 0 25px;

    }


    img {
        border: 0;
    }

    body, p, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, ol, form, input, pre, a, img {
        margin: 0;
        padding: 0;
        list-style: none;
        border: 0;
    }

    img[Attributes Style

    ]
    {
        width: 60px
    ;
        height: 60px
    ;
    }
    .c_sjzt {
        position: absolute;
        right: 0;
        top: 0;
    }


    div {
        display: block;
    }

    body {
        font-size: 14px;
    }

    body, p, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, ol, form, input, pre, a, img {
        margin: 0;
        padding: 0;
        list-style: none;
        border: 0;
    }

    .cover_left {
        width: 918px;
        overflow: hidden;
        float: left;
    }

    div {
        display: block;
    }
</style>